<template>
  <contents :heightInclude="['tabBar', 'navBar']" class="payment_page">
    <u-navbar
      :background="{ background: '#0049AC' }"
      title-color="#fff"
      :is-back="false"
    >
      <view class="heade">
        <view class="back" @click="back">
          <u-icon name="arrow-left" color="#fff" size="40"></u-icon>
        </view>
      </view>
    </u-navbar>

    <view class="price_box">
      <view class="price">
        <text class="icon">{{ $store.getters.currency }}</text>
        <text class="num">{{ orderInfo.paymentPrice || 0 }}</text>
      </view>
      <view class="count_down">
        <text class="down_text">{{ $t('locales.paymentTime') }}</text>
        <u-count-down
          :show-days="false"
          :timestamp="orderInfo.downTime"
          bg-color="#E5E5E5"
          font-size="22"
        ></u-count-down>
      </view>
    </view>
    <view v-if="!isShowCreditCard" class="payment_method_box">
      <u-radio-group v-model="radio" @change="paymentMethodChange">
        <view
          class="payment_method_item"
          v-for="item in orderInfo.payList"
          :key="item.id"
          @click="setPay(item)"
        >
          <view class="pay_neme">
            <image
              v-if="item.mark === 'offline'"
              class="icon"
              src="@/static/images/offline_pay.png"
              mode=""
            ></image>
            <image v-else class="icon" :src="item.icon" mode=""></image>
            <text>{{ item.name }}</text>
          </view>
          <u-radio :name="item.mark"></u-radio>
        </view>

        <!-- <view
					v-if="(payData.thridPartyAPIPayList || []).length"
					class="payment_method_item"
				>
					<view class="pay_neme">
						<image class="icon" src="@/static/images/credit_pay.png" mode=""></image>
						<text>{{ payData.thridPartyAPIPayList[0].payName }}</text>
					</view>
					<u-radio :name="payData.thridPartyAPIPayList[0].mark"></u-radio>
				</view> -->
      </u-radio-group>
    </view>

    <view v-else class="payment__credit-card">
      <u-form label-width="140rpx" label-position="left">
        <view class="payment__credit-wrap">
          <u-form-item :label="$t('locales.creditCardNo')"
            ><u-input
          /></u-form-item>
          <u-form-item :label="$t('locales.expiredDate')"
            ><u-input
          /></u-form-item>
          <u-form-item label="CW2"><u-input /></u-form-item>
        </view>
      </u-form>
    </view>
    <PassInput
      v-if="show"
      v-model="payPwd"
      @success="passInputSuccess"
      @cancel=";(show = false), (payPwd = '')"
    />
    <SubmitBtn @click="payConfirm" :text="$t('locales.immediatePayment')" />
  </contents>
</template>

<script>
import storage from '@/util/storage'
import { orderDetail, payment, payCheck } from '@/api/http/order'
import SubmitBtn from '@/components/submitBtn'
import PassInput from '@/components/passInput'

export default {
  components: {
    SubmitBtn,
    PassInput
  },
  data() {
    return {
      routerParams: {},
      radio: '',
      payPwd: '',
      orderInfo: {},
      paymentMethodInfo: {},
      show: false,
      isShowCreditCard: false
    }
  },

  computed: {
    payData() {
      const res = (this.orderInfo.payList || []).reduce(
        (prev, current) => {
          if (current.payType !== 4) {
            prev.payList.push(current)
          } else {
            prev.thridPartyAPIPayList.push(current)
          }

          return prev
        },
        {
          payList: [],
          thridPartyAPIPayList: []
        }
      )

      res.payList = res.payList.sort((a, b) => {
        if (b.payType === 1) {
          return -1
        }

        return a.payType - b.payType
      })

      return res
    }
  },

  onLoad(opt) {
    this.routerParams = opt
    this.getData()
  },
  methods: {
    setPay(row) {
      console.log(row)
      this.paymentMethodInfo = row
      this.radio = row.mark
    },

    back() {
      if (this.isShowCreditCard) {
        this.isShowCreditCard = false
      } else {
        uni.navigateBack()
      }
    },

    getData() {
      orderDetail({
        orderId: this.routerParams.id.split(',')
      }).then((res) => {
        if (res.code === 200) {
          let end = res.data.endTime.replace(/\-/g, '/')
          res.data.downTime = (new Date(end) - new Date().getTime()) / 1000
          // 默认选择第一个支付方式
          this.radio = res.data.payList[0].mark
          this.paymentMethodInfo = res.data.payList[0]
          this.orderInfo = res.data
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },
    paymentMethodChange(name) {
      this.orderInfo.payList.map((item) => {
        if (item.mark === name) {
          this.paymentMethodInfo = item
        }
      })
    },
    passInputSuccess() {
      console.log(this.payPwd)
    },
    // 支付
    payConfirm() {
      if (this.isShowCreditCard) {
        return this.handlePaymentAction()
      }

      if (this.paymentMethodInfo.payType === 4) {
        this.isShowCreditCard = true
        return
      }

      switch (this.paymentMethodInfo.mark) {
        case 'offline':
        case 'pacyPay':
        case 'payPal':
        case 'checkout':
        case 'oceanPay':
					this.setPayApi()
          break
        case 'wallet':
          payCheck({
            orderId: this.routerParams.id
          }).then((res) => {
            if (res.code === 200) {
              this.show = true
            } else {
              uni.showToast({
                icon: 'none',
                title: res.message
              })
            }
          })
          break
      }
    },

    setPayApi() {
      payment({
        orderId: this.routerParams.id,
        invoiceType: 1,
        payMethodId: this.paymentMethodInfo.id,
        payPwd: this.payPwd
      }).then((res) => {
        if (res.code === 200) {
          if (this.paymentMethodInfo.mark === 'pacyPay') {
            this.handlePacyPayAction()
            return
          }

          if (this.paymentMethodInfo.mark === 'payPal') {
            this.handlePayPalAction()
            return
          }

          if (this.paymentMethodInfo.mark === 'checkout') {
            this.handleCheckoutAction()
            return
          }

          if (this.paymentMethodInfo.mark === 'oceanPay') {
            this.handleOceanPayAction()
            return
          }

          uni.redirectTo({
            url: '/pages/order/details/index?id=' + this.routerParams.id
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },

    handlePacyPayAction() {
      uni.redirectTo({
        url:
          '/pages/order/form/index?order_id=' +
          this.routerParams.id +
          '&token=' +
          storage.get('token') +
          '&type=pacyPay'
      })
    },

    handlePayPalAction() {
      uni.redirectTo({
        url:
          '/pages/order/form/index?order_id=' +
          this.routerParams.id +
          '&token=' +
          storage.get('token') +
          '&type=payPal'
      })
    },

    handleCheckoutAction() {
      uni.redirectTo({
        url:
          '/pages/order/form/index?order_id=' +
          this.routerParams.id +
          '&token=' +
          storage.get('token') +
          '&type=checkout'
      })
    },

    handleOceanPayAction() {
      uni.redirectTo({
        url:
          '/pages/order/form/index?order_id=' +
          this.routerParams.id +
          '&token=' +
          storage.get('token') +
          '&type=oceanPay'
      })
    },

    async handlePaymentAction() {
      
      uni.showToast({
        title: 'Unsupported',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.payment_page {
  .back {
    width: 60rpx;
    flex-shrink: 0;
    padding-left: 20rpx;
  }

  .price_box {
    background-color: #ffffff;
    height: 230rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid #eeeeee;
    .price {
      display: flex;
      color: #f2270c;
      font-size: 48rpx;
      align-items: flex-end;
      .icon {
        font-size: 30rpx;
        height: 30rpx;
      }
      .num {
        height: 48rpx;
      }
    }
    .count_down {
      margin-top: 20rpx;
      .down_text {
        display: inline-block;
        margin-right: 20rpx;
        font-size: 22rpx;
      }
    }
  }
  .payment_method_box {
    background-color: #fff;
    .u-radio-group {
      width: 100%;
    }
    .payment_method_item {
      border-bottom: 1px solid #eeeeee;
      height: 96rpx;
      width: 100%;
      box-sizing: border-box;
      padding-left: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .pay_neme {
        display: flex;
        align-items: center;
        .icon {
          width: 50rpx;
          height: 50rpx;
          display: inline-block;
          margin-right: 15rpx;
        }
      }
    }
  }
  .pwd_box {
    padding: 25rpx 0rpx 130rpx 0;
    width: 650rpx;
    border-radius: 18rpx;
    margin: 0 50rpx;
    position: fixed;
    left: 0;
    top: 30%;
    z-index: 9999999;
    background-color: #fff;
    .title {
      text-align: center;
      font-size: 35rpx;
      margin-bottom: 50rpx;
    }
    .cancel_btn {
      position: absolute;
      right: 30rpx;
      top: 30rpx;
    }
  }
}

.payment__credit-card {
  background: #fff;

  .payment__credit-wrap {
    padding-left: 32rpx;
  }
}
</style>
